<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>{{ request.chart_web.user.username }}的个人中心</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link href="{% static 'css/personal_center/style.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/input/input.css' %}" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="{% static 'ico/personal_favicon.ico' %}"/>
    <style>
        a {
            cursor: pointer;
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .error_msg {
            position: relative;
            margin-left: 35px;
            color: red;
        }
    </style>
</head>
<body>
<section class="jq22-flexView">
    <section class="jq22-scrollView">
        <div class="jq22-my-head">
            <div class="jq22-my-color">
                <div class="jq22-flex">
                    <div class="jq22-flex-box">
                        <h1>{{ request.chart_web.user.username }}</h1>
                        <span>加入的时间:</span>
                        <span>{{ request.chart_web.user.date_joined }}</span>
                    </div>

                    <div class="jq22-my-user">
                        <!--修改头像-->
                        <a data-toggle="modal" data-target="#modify_icon" data-whatever="修改头像">
                            <img src="media/{{ request.chart_web.user.icon }}" alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <!--功能区-->
        <div class="jq22-course-list">
            <!--我的订单-->
            <a href="" class="jq22-flex ">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-001.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">我的订单</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="margin: 12px 0 10px">无可用优惠券</span>
                </div>
            </a>
            <!--我的学币-->
            <a href="" class="jq22-flex ">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-002.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">我的学币</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="color:#feaa50;margin: 12px 0 10px">520学币</span>
                </div>
            </a>
            <!--修改用户名-->
            <a class="jq22-flex" data-toggle="modal" data-target="#modify_username" data-whatever="修改用户名">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-003.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">修改用户名</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="margin: 12px 0 10px"></span>
                </div>
            </a>
            <!--修改密码-->
            <a class="jq22-flex" data-toggle="modal" data-target="#modify_password" data-whatever="修改密码">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-004.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">修改密码</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="margin: 12px 0 10px"></span>
                </div>
            </a>
            <!--修改手机号-->
            <a class="jq22-flex" data-toggle="modal" data-target="#myModal" data-whatever="修改手机号码">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-005.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">修改手机号码</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="margin: 12px 0 10px">{{ request.chart_web.user.telephone }}</span>
                </div>
            </a>
            <!--退出登录-->
            <a href="{% url 'logout' %}" class="jq22-flex">
                <div class="jq22-cou-img">
                    <img src="{% static 'images/personal_center/icon-fl-006.png' %}" alt="">
                </div>
                <div class="jq22-flex-box">
                    <p style="margin: 12px 0 10px">退出登录</p>
                </div>
                <div class="jq22-ren-arrow">
                    <span style="margin: 12px 0 10px"></span>
                </div>
            </a>
        </div>
    </section>
    <!--模态框-->
    <!-- Modal 修改手机号 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="id_modifyForm" novalidate>
                        {% csrf_token %}
                        <div class="row" style="margin-right: 0;margin-left: 0;">
                            <label>
                                <input type="text" disabled value="{{ request.chart_web.user.telephone }}">
                                <span>原手机号</span>
                            </label>
                            <label>
                                <input type="text" id="id_telephone" name="telephone">
                                <span>新手机号</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label>
                                <input type="text" id="id_code" name="code">
                                <span>验证码</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label style="margin-top: 64px">
                                <input type="button" id="id_spanBtn" value="发送验证码"
                                       style="font-size: 18px;text-align: center">
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" id="id_modify_telephoneBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 修改密码 -->
    <div class="modal fade" id="modify_password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="id_modifyPasswordForm" novalidate>
                        {% csrf_token %}
                        <div class="row" style="margin-right: 0;margin-left: 0;">
                            <label>
                                <input type="password" name="password" id="id_password">
                                <span>新密码</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label>
                                <input type="text" id="id_password_telephone" name="telephone" disabled
                                       value="{{ request.chart_web.user.telephone }}">
                                <span>手机号</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label>
                                <input type="text" id="id_password_code" name="code">
                                <span>验证码</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label style="margin-top: 64px">
                                <input type="button" id="id_spanPasswordBtn" value="发送验证码"
                                       style="font-size: 18px;text-align: center">
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" id="id_modify_passwordBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 修改用户名 -->
    <div class="modal fade" id="modify_username" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改用户名</h4>
                </div>
                <div class="modal-body">
                    <form id="id_modifyUsernameForm" novalidate>
                        {% csrf_token %}
                        <div class="row" style="margin-right: 0;margin-left: 0;">
                            <label>
                                <input type="text" value="{{ request.chart_web.user.username }}" disabled>
                                <span>老用户名</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                            <label>
                                <input type="text" id="id_username" name="username">
                                <span>新用户名</span>
                                <span class="error_msg" style="font-size: 10px;margin-left: -2px"></span>
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" id="id_modify_usernameBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 修改头像 -->
    <div class="modal fade" id="modify_icon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改头像</h4>
                </div>
                <div class="modal-body">
                    <!--原头像-->
                    <div class="jq22-my-user">
                        <!--修改头像-->
                        <img src="media/{{ request.chart_web.user.icon }}" alt="原头像">
                    </div>
                    <form id="id_modifyIconForm" novalidate>
                        {% csrf_token %}
                        <div class="jq22-my-user">
                            <label for="id_icon">
                                <!--新的头像展示-->
                                <img src="" alt="更换头像" id="myImg">
                            </label>
                            <input type="file" id="id_icon" name="icon" style="display: none">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" id="id_button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <footer class="jq22-footer jq22-footer-fixed">
        <a href="{% url 'home' %}" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-loan"></i>
                    </span>
            <span class="jq22-tabBar-item-text">首页</span>
        </a>
        <a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-credit"></i>
                    </span>
            <span class="jq22-tabBar-item-text">商城</span>
        </a>
        <a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-ions"></i>
                    </span>
            <span class="jq22-tabBar-item-text">树洞</span>
        </a>

        <a href="javascript:;" class="jq22-tabBar-item jq22-tabBar-item-active">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-meTo">故事</i>
                    </span>
            <span class="jq22-tabBar-item-text"></span>
        </a>
    </footer>
</section>

<!--模态框-->

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="{% static 'js/input/prefixfree.min.js.下载' %}"></script>
<script>
    // 修改手机号码
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text(recipient)
    })
    // 修改密码
    $('#modify_password').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text(recipient)
    })
</script>


<script>
    $(function () {
        modify_code();
        modify_telephone();
        modify_passwordCode();
        modify_password();
        modify_username();

    })

    //修改手机号验证码发送
    function modify_code() {
        $("#id_spanBtn").click(function () {
            telephone = $("#id_telephone").val()
            $.ajax({
                url: "{% url 'tencent_sms' %}",
                type: "POST",
                data: {
                    telephone: telephone, tpl: 'modify_telephone', csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                dataType: "JSON",
                success: function (ret) {

                    if (ret.status) {

                    } else {
                        console.log(ret.msg)
                        $("#id_telephone").next().next().text(ret.msg.telephone[0])
                    }
                }
            })
            // 获得焦点，上次错误清空
            $('input').focus(function () {
                $(this).next().next().empty()
            })
        })
    }

    //修改手机号
    function modify_telephone() {
        $("#id_modify_telephoneBtn").click(function () {
            $.ajax({
                url: "{% url 'modify_telephone' user_id=request.chart_web.user.id %}",
                type: "POST",
                data: $("#id_modifyForm").serialize(),
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        location.href = "{% url 'personal_center' %}"
                    } else {
                        console.log(ret.msg)
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).next().next().text(value[0])
                        })
                    }
                }
            })
            // 获得焦点，上次错误清空
            $('input').focus(function () {
                $(this).next().next().empty()
            })
        })
    }

    //修改手机号验证码发送
    function modify_passwordCode() {
        $("#id_spanPasswordBtn").click(function () {
            telephone = $("#id_password_telephone").val()
            $.ajax({
                url: "{% url 'tencent_sms' %}",
                type: "POST",
                data: {
                    telephone: telephone, tpl: 'modify_password', csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                dataType: "JSON",
                success: function (ret) {

                    if (ret.status) {

                    } else {
                        $("#id_password_telephone").next().next().text(ret.msg.telephone[0])
                    }
                }
            })
            // 获得焦点，上次错误清空
            $('input').focus(function () {
                $(this).next().next().empty()
            })
        })
    }

    //修改密码
    function modify_password() {
        $("#id_modify_passwordBtn").click(function () {
            $.ajax({
                url: "{% url 'modify_password' user_id=request.chart_web.user.id %}",
                type: "POST",
                data: {
                    telephone: $("#id_password_telephone").val(),
                    password: $('#id_password').val(),
                    code: $('#id_password_code').val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        location.href = "{% url 'register_login' %}"
                    } else {
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).next().next().text(value[0])
                        })
                        $("#id_password_code").next().next().text(ret.msg.code[0])
                    }
                }
            })
            // 获得焦点，上次错误清空
            $('input').focus(function () {
                $(this).next().next().empty()
            })
        })
    }

    // 修改用户名
    function modify_username() {
        $("#id_modify_usernameBtn").click(function () {
            $.ajax({
                url: "{% url 'modify_username' user_id=request.chart_web.user.id %}",
                type: "POST",
                data: $('#id_modifyUsernameForm').serialize(),
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        location.href = "{% url 'personal_center' %}"
                    } else {
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).next().next().text(value[0])
                        })
                    }
                }
            })
            // 获得焦点，上次错误清空
            $('input').focus(function () {
                $(this).next().next().empty()
            })
        })
    }
</script>

<script>
    // 老头像展示 新头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>
<script>
    // Ajax提交
    $('#id_button').click(function () {
        var myFormData = new FormData();
        // 普通键(csrf_token/username)
        $.each($('#id_modifyIconForm').serializeArray(), function (index, obj) {
            myFormData.append(obj.name, obj.value)
        })
        // 特殊的键
        myFormData.append('icon', $('#id_icon')[0].files[0]);  // 获取input框内部用户上传的文件对象

        $.ajax({
            url: "{% url 'modify_icon' user_id=request.chart_web.user.id %}",
            type: "post",
            data: myFormData,
            processData: false,  // 让浏览器不要对你的数据进行任何的操作
            contentType: false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
            success: function (ret) {
                if (ret.status) {
                    // console.log($('#myForm').serializeArray()) // [{}]
                    //console.log($('#myForm').serialize()) // urlencode 类似于字符传 被解析到request.POST字典中
                    location.href = "{% url 'personal_center' %}"
                }
            }
        })
    })
</script>
</html>